<template>
  <div class="flexible-content">
    <!--Navbar-->
    <mdb-navbar class="flexible-navbar white" position="top" name="MDB" href="#" scrolling>
      <mdb-navbar-brand href="https://mdbootstrap.com/docs/vue/" target="_blank">智能选题系统</mdb-navbar-brand>
      <mdb-navbar-toggler>
        <mdb-navbar-nav left>
          <router-link to="/dashboard" @click.native="activeItem = 1">
            <mdb-nav-item href waves-fixed active>Intelligent Subject Selection System</mdb-nav-item>
          </router-link>
          <!-- <mdb-nav-item
            href="https://mdbootstrap.com/docs/vue/getting-started/quick-start/"
            waves-fixed
          >About MDB</mdb-nav-item>
          <mdb-nav-item
            href="https://mdbootstrap.com/docs/vue/getting-started/download/"
            waves-fixed
          >Free download</mdb-nav-item>
          <mdb-nav-item
            href="https://mdbootstrap.com/education/bootstrap/"
            waves-fixed
          >Free tutorials</mdb-nav-item>-->
        </mdb-navbar-nav>
        <mdb-navbar-nav right>
          <!-- <mdb-nav-item href="#!" waves-fixed>
            <mdb-icon class="text-black" icon="facebook"/>
          </mdb-nav-item>-->
          <mdb-nav-item>
            您好 ：
            <span style="color:#33b5e5">小明</span> 同学
          </mdb-nav-item>&nbsp;&nbsp;
          <mdb-btn gradient="aqua" style="border-radius: 25px;" size="sm">退出</mdb-btn>

          <!-- <mdb-nav-item
            href="https://mdbootstrap.com/products/vue-ui-kit/"
            waves-fixed
            class="border border-light rounded"
            target="_blank"
          >
            <mdb-icon icon="diamond" class="mr-2"/>Go Pro
          </mdb-nav-item>
          <mdb-nav-item waves-fixed target="_blank">
            <mdb-btn tag="a" floating size="lg" gradient="purple">
              <mdb-icon icon="bolt"/>
            </mdb-btn>
          </mdb-nav-item>-->
        </mdb-navbar-nav>
      </mdb-navbar-toggler>
    </mdb-navbar>
    <!--/.Navbar-->
    <!-- Sidebar -->
    <div class="sidebar-fixed position-fixed">
      <a class="logo-wrapper">
        <img alt class="img-fluid" src="./assets/logo-mdb-vue-small.png">
      </a>
      <mdb-list-group class="list-group-flush">
        <router-link to="/dashboard" @click.native="activeItem = 1">
          <mdb-list-group-item :action="true" :class="activeItem === 1 && 'active'">
            <mdb-icon icon="pie-chart" class="mr-3"/>个人资料
          </mdb-list-group-item>
        </router-link>
        <router-link to="/profile" @click.native="activeItem = 2">
          <mdb-list-group-item :action="true" :class="activeItem === 2 && 'active'">
            <mdb-icon icon="user" class="mr-3"/>新增课题
          </mdb-list-group-item>
        </router-link>
        <router-link to="/tables" @click.native="activeItem = 3">
          <mdb-list-group-item :action="true" :class="activeItem === 3 && 'active'">
            <mdb-icon icon="table" class="mr-3"/>选题管理
          </mdb-list-group-item>
        </router-link>
        <router-link to="/maps" @click.native="activeItem = 4">
          <mdb-list-group-item :action="true" :class="activeItem === 4 && 'active'">
            <mdb-icon icon="map" class="mr-3"/>参加选题
          </mdb-list-group-item>
        </router-link>
        <router-link to="/404" @click.native="activeItem = 5">
          <mdb-list-group-item :action="true" :class="activeItem === 5 && 'active'">
            <mdb-icon icon="exclamation" class="mr-3"/>404
          </mdb-list-group-item>
        </router-link>
      </mdb-list-group>
    </div>
    <!-- /Sidebar  -->
    <main>
      <div class="mt-5 p-5">
        <router-view></router-view>
      </div>
      <ftr color="primary-color-dark" class="text-center font-small darken-2">
        <div class="pt-4">
          <mdb-btn
            outline="white"
            tag="a"
            href="https://mdbootstrap.com/docs/vue/getting-started/download/"
            target="_blank"
          >Download MDB
            <mdb-icon icon="download" class="ml-2"/>
          </mdb-btn>
          <mdb-btn
            outline="white"
            tag="a"
            href="https://mdbootstrap.com/education/bootstrap/"
            target="_blank"
          >Start free tutorial
            <mdb-icon icon="graduation-cap" class="ml-2"/>
          </mdb-btn>
        </div>
        <hr class="my4">
        <div class="pb-4">
          <a href="#">
            <mdb-icon icon="facebook" class="mr-3"/>
          </a>
          <a href="#">
            <mdb-icon icon="twitter" class="mr-3"/>
          </a>
          <a href="#">
            <mdb-icon icon="youtube" class="mr-3"/>
          </a>
          <a href="#">
            <mdb-icon icon="google-plus" class="mr-3"/>
          </a>
          <a href="#">
            <mdb-icon icon="dribbble" class="mr-3"/>
          </a>
          <a href="#">
            <mdb-icon icon="pinterest" class="mr-3"/>
          </a>
          <a href="#">
            <mdb-icon icon="github" class="mr-3"/>
          </a>
          <a href="#">
            <mdb-icon icon="codepen" class="mr-3"/>
          </a>
        </div>
        <p class="footer-copyright mb-0 py-3 text-center">
          &copy; {{new Date().getFullYear()}} Copyright:
          <a
            href="https://mdbootstrap.com/docs/vue/"
          >MDBootstrap.com</a>
        </p>
      </ftr>
    </main>
  </div>
</template>

<script>
import {
  mdbContainer,
  mdbNavbar,
  mdbNavbarBrand,
  mdbNavItem,
  mdbNavbarNav,
  mdbNavbarToggler,
  mdbBtn,
  mdbIcon,
  mdbListGroup,
  mdbListGroupItem,
  mdbCardBody,
  mdbFooter,
  waves
} from "mdbvue";
import Dashboard from "./components/Dashboard";
import Profile from "./components/Profile";

export default {
  name: "AdminTemplate",
  components: {
    mdbContainer,
    mdbNavbar,
    mdbNavbarBrand,
    mdbNavItem,
    mdbNavbarNav,
    mdbNavbarToggler,
    mdbBtn,
    mdbListGroup,
    mdbListGroupItem,
    mdbIcon,
    mdbCardBody,
    ftr: mdbFooter,
    Dashboard,
    Profile
  },
  data() {
    return {
      activeItem: 1
    };
  },
  beforeMount() {
    this.activeItem = this.$route.matched[0].props.default.page;
  },
  mixins: [waves]
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
main {
  background-color: #ededee;
}

.flexible-content {
  transition: padding-left 0.3s;
  padding-left: 270px;
}

.flexible-navbar {
  transition: padding-left 0.5s;
  padding-left: 270px;
}

.sidebar-fixed {
  left: 0;
  top: 0;
  height: 100vh;
  width: 270px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  z-index: 1050;
  background-color: #fff;
  padding: 1.5rem;
  padding-top: 0;
}

.sidebar-fixed .logo-wrapper img {
  width: 100%;
  padding: 2.5rem;
}

.sidebar-fixed .list-group-item {
  display: block !important;
  transition: background-color 0.3s;
}

.sidebar-fixed .list-group .active {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  border-radius: 5px;
}

@media (max-width: 1199.98px) {
  .sidebar-fixed {
    display: none;
  }
  .flexible-content {
    padding-left: 0;
  }
  .flexible-navbar {
    padding-left: 10px;
  }
}
</style>
<style>
.navbar-light .navbar-brand {
  margin-left: 15px;
  color: #2196f3 !important;
  font-weight: bolder;
}
</style>
